import type { FC } from 'react';
import { TouchableOpacity } from 'react-native';
import IconText from '../iconText';
import Entypo from '@expo/vector-icons/Entypo';
import { primaryColor } from '@/constants/Colors';

type LikesProps = {
  liked?: boolean;
  total: number;
  large?: boolean;
  onClick?: () => void;
}

const limit = 999;

const Likes: FC<LikesProps> = (props) => {
  const {
    total,
    onClick,
    large = false,
    liked = false,
  } = props;

  const color = large ? '#454545' : '#999';
  const label = total > limit ? `${limit}+` : total;

  return (
    <TouchableOpacity
      activeOpacity={.8}
      onPressIn={onClick}
    >
      <IconText
        fontColor={color}
        text={label + ''}
        iconWidth={large ? 24 : 21}
        fontSize={large ? 15 : 12}
      >
        <Entypo
          size={large ? 24 : 21}
          color={liked ? primaryColor : color}
          name={liked ? 'heart' : 'heart-outlined'}
        />
      </IconText>
    </TouchableOpacity>
  );
}

export default Likes;